<template>
  <div class="engraving-dotnav">
    <ul class="tablist" id="tablist">
      <li class="presentation">
        <button
          class="dotnav-item"
          @click="buttonChange(0)"
          id="dotnav-item"
        ></button>
      </li>
      <li class="presentation">
        <button
          class="dotnav-item"
          id="dotnav-item"
          @click="buttonChange(1)"
        ></button>
      </li>
      <li class="presentation">
        <button
          class="dotnav-item"
          id="dotnav-item"
          @click="buttonChange(2)"
        ></button>
      </li>
      <li class="presentation">
        <button
          class="dotnav-item"
          id="dotnav-item"
          @click="buttonChange(3)"
        ></button>
      </li>
      <li class="presentation">
        <button
          class="dotnav-item"
          id="dotnav-item"
          @click="buttonChange(4)"
        ></button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 进行传递参数，让页面动起来
      Number:'0'
    }
  },
  methods: {
    addIndex() {
      // 当页面加载完毕调用
      window.addEventListener("load", function () {
        var wholeLi = document.getElementById("tablist");
        var wholelif = document.querySelectorAll(".presentation");
        var wholeButton = document.getElementById("dotnav-item");
        for (let i = 0; i < wholeLi.children.length; i++) {
          wholelif[i].setAttribute("index", i);
        }
      });
    },
    //  点击事件，更改样式
    buttonChange(e) {
      var wholeButton = document.querySelectorAll(".dotnav-item");
      // 先清除所有的背景色，然后再进行添加背景色
      for (let i = 0; i< wholeButton.length; i++) {
         wholeButton[i].style.backgroundColor = "rgba(0, 0, 0, 0.16)";
         // 添加点击穿透然后0.8s之后消失 
         wholeButton[i].style.pointerEvents='none';
         
         setTimeout(() => {
          wholeButton[i].style.pointerEvents='auto'
          }, 800);
      }
    
      wholeButton[e].style.backgroundColor = "#77777c";
      this.Number=e
      // 传递参数给父组件
      this.$emit('childByValue',this.Number)
     
    },
  },
  mounted() {
    var wholeButton = document.querySelectorAll(".dotnav-item");
    this.addIndex();
    wholeButton[0].style.backgroundColor = "#77777c"
  },
};
</script>

<style lang="less" scoped>
.engraving-dotnav {
  width: 490px;
  height: 36px;
  padding-top: 11px;
  margin-top: 12px;
  text-align: center;
  box-sizing: border-box;
  ul {
    display: inline-flex;
    li {
      position: relative;
      margin: 0 7px;
      width: 8px;
      height: 8px;
      position: relative;
      list-style: none;
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
        border-radius: 50%;
        outline: none;
        border: none;
        background-color: rgba(0, 0, 0, 0.16);
      }
      button:hover {
        background-color: #adadad;
      }
      .dotnav-item::after {
        content: "";
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -6px;
        right: -8px;
      }
    }
  }
}
</style>